<template> 
  <el-card class="form-container" shadow="never">
    <el-form
             label-width="150px">
      <el-form-item label="头像：">
        <template ><img style="height: 100px" :src="icon"></template>
      </el-form-item>
      <el-form-item label="账号：">
        <span class="note-margin" v-text="username"></span>
      </el-form-item>
      <el-form-item label="角色：">
        <span class="note-margin"  v-text="roles"></span>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
  import {getInfo} from '@/api/login';

  export default {
    name: 'personal',
    data() {
      return {
        username:'',
        icon:'',
        roles:''
      }
    },
    created(){

    },
    mounted(){
      this.getDetail();
    },
    methods:{
      getDetail(){
        getInfo().then(response=>{
          this.username=response.data.username;
          this.icon=response.data.icon;
          this.roles=response.data.roles.join(",");
        })
      }
    }
  }
</script>
<style scoped>
  .input-width {
    width: 50%;
  }

  .note-margin {
    margin-left: 15px;
  }
</style>


